<template>
	<view class="full">
		<!-- 搜索 -->
		<view class="search">
			<view class="sear" @click="clickHandle(1)">
				<uni-icons icon type="search" color="#9c9c9c"></uni-icons>
				<text hot>{{hotTxt}}</text>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view class="item" v-for="(item, index) in listData" :key="index"
				@click="clickHandle(2, item)">
				<image img :src="item.img" mode="aspectFill"></image>
				<view title><text>{{item.title}}</text></view>
				<view remark><text>{{item.remark}}</text></view>
			</view>
		</view>
		<uni-load-more v-if="loading" :status="loadStatus"></uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 热门搜索	数据
				hotTxt: '', listData: [],
				// 加载					加载状态
				loading: false, loadStatus: 'more'
			}
		},
		onPullDownRefresh() { // 下拉刷新
			console.log('下拉')
			this.loading = false
			this.loadStatus = 'more'
			uni.stopPullDownRefresh();
		},
		onPageScroll() { // 滚动监听
			!this.loading && (this.loading = true)
		},
		onReachBottom() { // 上拉加载
			console.log('上拉')
			if (this.loadStatus != '') {
				this.loadStatus = 'loading'
				setTimeout(() => {this.loadStatus = ''}, 1500)
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() { // 初始化
				this.hotTxt = '花木兰'
				this.listData = [
					{ 
						id: 1, img: '/static/img/roll/1.jpg',
						title: '"黑豹"查德维克·博斯曼', remark: '黑豹，你是一名真正的斗士',
					},
					{ 
						id: 2, img: '/static/img/roll/1.jpg',
						title: '情色艺术片', remark: '比起肉欲更值得思考的是人性和感情。',
					},
					{ 
						id: 3, img: '/static/img/roll/1.jpg',
						title: '清透呆萌@新旦结衣', remark: '日本清纯型女星，可爱，有魅力，很有存在感。',
					},
					{ 
						id: 4, img: '/static/img/roll/1.jpg',
						title: '假期慢看高评分日剧', remark: '总有一些有点打动你。',
					}
				]
			},
			// 点击-回调 type 1 搜索 2查看详情 row 当前对象
			clickHandle(type, row) {
				switch(type) {
					case 1: // 搜索
						console.log('搜索')
						uni.navigateTo({
							url: '/pages/tabs/find/search'
						})
						break
					case 2: // 查看详情
						console.log('详情:', JSON.stringify(row))
						break
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.full{
	.search{
		/* #ifdef APP-PLUS */
		position: fixed;
		/* #endif */
		position: sticky;
		top: 0;
		width: 100%;
		z-index: 9999;
		background: #fff;
		text-align: center;
		padding: 10rpx 0 20rpx;
		.sear{
			width: 90%;
			margin: auto;
			padding: 8rpx;
			font-size: 22rpx;
			border-radius: 40rpx;
			border: 2rpx solid #e8e8e8;
			[icon]{
				font-weight: bold;
			}
			[hot]{
				color: #a7a4a4;
				margin-left: 5px;
			}
		}
	}
	.content{ // 内容区
		/* #ifdef APP-PLUS */
		margin-top: 42px;
		/* #endif */
		.item{
			margin-bottom: 20rpx;
			[img]{
				width: 100%;
				height: 400rpx;
			}
			[title]{
				font-size: 28rpx;
				margin-top: 10rpx;
				padding-left: 30rpx;
			}
			[remark]{
				font-size: 20rpx;
				color: #9a9898;
				margin-top: 3px;
				padding-left: 30rpx;
			}
		}
	}
}
</style>
